
<template>
    <div class="upload-img-component">
        <div id="dropZone">
            <label class="input-img-btn" for="file_input">拖拽图片到此处(小于20Mib)</label>
            <input
                id="file_input"
                style="display:none;"
                type="file"
                accept="image/*"
                @change="changeFile"
            />
        </div>
        <div v-if="data.base64" class="preview-content">
            <img :src="data.base64" alt />
            <textarea readonly @click="copyBase64Text" id="encodeText">{{ data.base64 }}</textarea>
        </div>
    </div>
    <div
        v-if="data.base64"
        style="margin-left: 100px;margin-top: 50px;color: #42b983;"
    >Tips: 点击文本框即可复制</div>
    <div v-show="data.showTips" class="base-message" style="z-index: 3;">
        <div>内容复制成功</div>
    </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
function readFile(reader) {
    return new Promise((resolve, reject) => {
        try {
            reader.onload = function () {
                resolve({
                    name: this.fileName,
                    base64: this.result,
                })
            }
        } catch (error) {
            reject(error)
        }
    })
}
onMounted(() => {
    const dropZone = document.querySelector("#dropZone");
    dropZone.addEventListener("dragenter", function (e) {
        e.preventDefault();
        e.stopPropagation();
    }, false);

    dropZone.addEventListener("dragover", function (e) {
        e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用，如圈点
        e.preventDefault();
        e.stopPropagation();
    }, false);

    dropZone.addEventListener("dragleave", function (e) {
        e.preventDefault();
        e.stopPropagation();
    }, false);

    dropZone.addEventListener("drop", function (e) {
        e.preventDefault();
        e.stopPropagation();

        // df dropFile
        let df = e.dataTransfer;
        if (df.items !== undefined) {
            // Chrome拖拽文件逻辑
            for (let i = 0; i < df.items.length; i++) {
                let item = df.items[i];
                if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
                    fileReader(item.getAsFile())
                }
            }
        }
    }, false)
})

const data = reactive({
    base64: '',
    showTips: false
})
/* 选择文件 */
async function changeFile(e) {
    let files = e.target.files[0]
    if (files.size > 20 * 1024 * 1024) {
        alert('文件过大')
        return
    }
    fileReader(files)
}

/* fileReader */
async function fileReader(file) {
    const reader = new FileReader()
    reader.fileName = file.name
    reader.readAsDataURL(file)
    const res = await readFile(reader)
    data.base64 = res.base64
}

/* 复制base64到剪切板 */
function copyBase64Text() {
    const text = document.querySelector("#encodeText")
    text.select()
    if (document.execCommand('copy')) {
        animationControl('showTips')
    }
}

/* 控制动画显示隐藏 */
function animationControl(name, timeout = 3000) {
    data[name] = true
    setTimeout(() => {
        data[name] = false
    }, timeout);
}

</script>

 <style>
.base-message {
    min-width: 380px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background-color: #42b983;
    transition: opacity 0.3s, transform 0.4s, top 0.4s;
    overflow: hidden;
    padding: 15px 15px 15px 20px;
    display: flex;
    align-items: center;
    color: #fff;
}
img {
    width: 300px;
    margin-left: 100px;
}
textarea {
    display: block;
    min-height: 100px;
    width: calc(100vw - 515px);
    border-radius: 5px;
    border: 1px solid #999;
    resize: none;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.preview-content {
    display: flex;
}
.input-img-btn {
    display: block;
    width: 90vw;
    height: 300px;
    line-height: 300px;
    text-align: center;
    margin: 10px auto;
    border-radius: 20px;
    color: #000;
    font-size: 25px;
    border: 2px dashed #000;
    background: #fff
        url();
    background-position: center 60px;
    background-repeat: no-repeat;
    background-size: 80px;
    cursor: pointer;
}
</style>